<template>
	<coreshop-page bgColor="rgba(0,0,0,0)">
		<view class="layout-invite-box">
			<image class="bg" src="/static/images/invite-bg.jpg" mode="widthFix"></image>
			<image class="bg-title" src="/static/images/invite-title.png" mode="widthFix"></image>

			<view class="invite-box">
				<view class="invite-code">
					<view class="title">我的专属邀请码</view>
					<view class="code">{{ state.myInvite?.code }}</view>
					<view class="desc">
						快去分享您的邀请码吧，让更多的好友加入到【{{ shopConfigStore?.config?.shopName }}】，您也可以获得丰厚的奖励！
					</view>
					<view class="price-box">
						<view class="box">
							<view class="tit">￥{{ state.myInvite?.money }}</view>
							<view class="gray">邀请收益</view>
						</view>
						<view class="box" @click="handleRouteNavigateTo('/pages/subpackage/member/invite/list/list')">
							<view class="tit">{{ state.myInvite?.number }}</view>
							<view class="gray">邀请人数</view>
						</view>
					</view>
					<view class="btn-box">
						<!-- #ifdef MP-WEIXIN -->
						<button class="btn black" open-type="share">
							<uv-icon name="moments" color="#fff" size="15"></uv-icon>分享朋友圈
						</button>
						<!-- #endif -->
						<view class="btn red" @click="handleQRcodeShare">
							<uv-icon name="share" color="#fff" size="15"></uv-icon>二维码分享
						</view>
					</view>
				</view>
				<view class="who-invite" v-if="!state.isSuperior">
					<view class="title">谁推荐你的？</view>
					<view class="code">
						<uv-input placeholder="请输入推荐人邀请码" inputAlign="center" border="none"
							v-model="state.inviteKey"></uv-input>
					</view>
					<view class="btn" @click="handleSubmit">提交</view>
				</view>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import { queryShare, queryMyInvite, setMyInvite } from '@/core/api';
	import type { Response, InviteMsgType, ShopConfigStoreType } from '@/core/models';
	import { useShopConfigStore } from '@/core/store';
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { shareUrl, UserToken } from '@/core/consts';
	import { handleRouteNavigateTo, handleShowToast } from '@/core/utils';
	import { ShareEnum, ShareClientEnum, ShareModelEnum } from '@/core/enum';


	/** 获取项目配置 */
	const shopConfigStore : ShopConfigStoreType = useShopConfigStore();

	const state = reactive<{
		myInvite : InviteMsgType;
		inviteKey : string | number;
		isSuperior : boolean;
	}>({
		myInvite: {},
		inviteKey: "",
		isSuperior: false,
	})

	onMounted(() => {
		getMyInvite();
	});

	const getMyInvite = async () => {
		const myInvite : Response<InviteMsgType> = await queryMyInvite();
		state.myInvite = myInvite?.data;
		state.isSuperior = myInvite?.data?.isSuperior;
	}

	/** 填写推荐吗提交 */
	const handleSubmit = async () => {
		if (!state.inviteKey) {
			handleShowToast('请填写邀请码');
			return;
		}
		const invite = await setMyInvite({ id: state.inviteKey });
		if (invite.status) {
			handleShowToast('邀请码填写成功', 'success');
			state.isSuperior = true;
		} else {
			handleShowToast(invite.msg);
		}
	}

	/** 二维码分享 */
	const handleQRcodeShare = async () => {
		let data = {
			client: ShareClientEnum.wxMiNiProgram,
			url: shareUrl,
			type: ShareModelEnum.poster,
			page: ShareEnum.index,
		}
		if (uni.getStorageSync(UserToken)) {
			data['token'] = uni.getStorageSync(UserToken)
		}
		const share = await queryShare(data);
		if (share.status) {
			handleRouteNavigateTo(`/pages/share/qrCode/qrCode?poster=${encodeURIComponent(share.data)}`)
		} else {
			handleShowToast(share.msg);
		}
	}

	onShareAppMessage(() => {
		return {
			title: shopConfigStore.config.shareTitle,
			imageUrl: shopConfigStore.config.shareImage,
			path: shareUrl
		}
	});

	onShareTimeline(() => {
		return {
			title: shopConfigStore.config.shareTitle,
			imageUrl: shopConfigStore.config.shareImage,
			path: shareUrl
		}
	})
</script>
<style lang="scss" scoped>
	@import './invite.scss';
</style>